<template>
	<view class="container">
		<van-nav-bar
		  title="挂单中心"
		  :border='false'
		  right-text="添加挂单"
		  @click-right="onClickRight"
		/>
		<view class="List">
			<view class="ListLi">
				<view class="topLi"><text class="titleLi">收购KOI</text><text class="success">交易完成</text></view>
				<view class="time">2023年10月15日  00：33：06</view>
				<view class="content">
					<view>
						<text class="num">1000</text>
						<text class="tips">KOI收购数量</text>
					</view>
					<view>
						<text class="tips">KOI收购总数：100</text>
						<text class="tips">KOI已收购：80</text>
						<text class="tips">USDT已支出：81.3021USDT</text>
					</view>
				</view>
				<view class="btn" v-if="status === '交易中'"> <van-button>停止收购</van-button></view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
	const onClickRight = ()=>{
		console.log(111)
		uni.navigateTo({
			url: '/service/addHang/index'
		})
	}
	const status  =ref('')
</script>

<style lang="scss" scoped>
	.container{
		color: white;
		background-color: #121317;
		height: 100vh;
	}
	::v-deep.van-nav-bar__title,.van-ellipsis{
		font-size: 36px;
		color: white;
		font-weight: 500;
		overflow: visible;
	}
	::v-deep.van-nav-bar__content{
		height: 88px;
		background-color: #121317;
	}
	::v-deep.van-nav-bar__text{
		font-size: 28px;
		color: #21F5EA;
	}
	.List{
		padding: 40px 32px;
		.ListLi{
			padding: 32px;
			border-radius: 16px;
			background: #2a2b2e;
			.topLi{
				display: flex;
				justify-content: space-between;
				.titleLi{
					font-size: 28px;
					color: white;
				}
				.success{
					color: red;
					font-size: 24px;
				}
			}
			.content{
				display: flex;
				justify-content: center;
				padding: 32px 0;
				view{
					width: 50%;
					height: auto;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					// align-items: center;
					
					&:nth-of-type(1){
						justify-content: center;
						.num{
							font-size: 40px;
						}
						.tips{
							font-size: 24px;
						}
					}
					&:nth-of-type(2){
						.tips{
							font-size: 24px;
							margin-bottom: 10px;
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
								white-space: nowrap;
						}
					}
				}
				
			}
			.time{
				color: #cccccc;
				// text-align: center;
				font-size: 24px;
			}
			.btn{
				display: flex;
				justify-content: center;
				.van-button{
					width: 160px;
					height: 66px;
					background: #00D0B9;
					border-radius: 8px;
					border: 0;
					font-size: 26px;

				}
			}
		}
	}
</style>